<template>
  <div>
    <div class="return" @click="handlereturn">
      <img
        src=""
        alt
      />
    </div>
    <div class="cinema">
      <div class="header-title" :class="isTitle ? 'fixed' : '' ">{{datalist.name}}</div>
      <div class="tags">
        <ul>
          <li v-for="data in datalist.services" :key="data.name">{{data.name}}</li>
          <li class="hide">
            <i class="iconfont icon-changyongicon"></i>
          </li>
        </ul>
      </div>
      <div class="addres">
        <img
          src=""
          alt
        />
        <span>{{datalist.address}}</span>
        <a href="#">
          <img
            src=""
            alt
          />
        </a>
      </div>
      <cinemaDetailsllist :id="$route.params.id"></cinemaDetailsllist>
    </div>
  </div>
</template>
<script>
import cinemaDetailsllist from '../views/CinemaDetails/CinemaDetailsllist'
export default {
  props: ['id', 'router'],
  data () {
    return {
      datalist: [],
      isTitle: false
    }
  },
  components: {
    cinemaDetailsllist
  },
  methods: {
    handleScroll () {
      if (document.documentElement.scrollTop >= 44) {
        this.isTitle = true
      } else {
        this.isTitle = false
      }
    },
    handlereturn () {
      if (this.$route.params.router) {
        this.$router.push(this.$route.params.router)
      } else {
        this.$router.push('/cinema')
      }
    },
    async axiosCinema () {
      const res = await this.$http.get(`/gateway/?cinemaId=${this.$route.params.id}&k=3`)
      this.datalist = res.data.data.cinema
      window.onscroll = this.handleScroll
    }
  },
  mounted () {
    this.axiosCinema()
  },
  beforeMount () {
    this.$store.commit('isTabbrshow', false)
  },
  beforeDestroy () {
    this.$store.commit('isTabbrshow', true)
    window.onscroll = null // 解除监听
  }
}
</script>
<style lang="scss" scoped>
.return {
  position: fixed;
  z-index: 1000;
  width: 3.056vw;
  height: 5vw;
  left: 4.167vw;
  top: 3.611vw;
  img {
    width: 3.056vw;
    height: 5vw;
  }
}
.cinema {
  padding-top: 12.222vw;
  .header-title {
    height: 12.222vw;
    width: 100%;
    padding: 0 4.167vw;
    box-sizing: border-box;
    line-height: 12.222vw;
    text-align: center;
    font-size: 4.722vw;
    color: #191a1b;
    background: white;
    z-index: 999;
  }
  .tags {
    padding: 1.389vw 0 4.167vw 0;
    overflow: hidden;
    // height:3.889vw
    ul {
      width: 100%;
      display: flex;
      justify-content: center;
      li {
        width: auto;
        height: auto;
        float: left;
        margin: 0 0.833vw;
        padding: 0 1.111vw;
        border: 0.278vw solid #ffb232;
        color: #ffb232;
        font-size: 2.222vw;
        line-height: 3.611vw;
      }
      .hide {
        border: none;
        font-size: 1.667vw;
        padding: 0;
        position: relative;
        top: 0.278vw;
      }
    }
  }
  .addres {
    display: flex;
    align-items: center;
    padding-left: 4.722vw;
    height: 13.889vw;
    img {
      width: 3.889vw;
      height: 5.833vw;
    }
    span {
      width: 100%;
      padding: 0 3.333vw;
      font-size: 3.889vw;
      height: 5.556vw;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #2c3e50;
    }
    a {
      padding: 0 6.944vw;
      img { 
        width: 4.722vw;
        height: 5vw;
      }
    }
  }
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
}
</style>
